<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-06-29 17:25:20
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-21 16:42:26
 * @FilePath: \大宗买卖\ebuy\src\views\Main\Supplier\product\ProductDetail\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
  <div class="productDetail">
    <div class="content-block">
        <div class="product-detail">
            <p>{{product.introduction}}</p>
        </div>
        <hr>
        <div class="product-usage">
            <p>{{product.description}}</p>
        </div>
        <hr style="margin-bottom:10px">
        <div class="product-usage">
            <p>#成熟期</p>
        </div>
        <hr style="margin-bottom:10px">
        <div class="product-pic clearfix">
            <el-carousel :interval="4000" type="card" height="300px" indicator-position="none" class="images">
                <el-carousel-item class="image" v-for="(item,index) in images" :key="index">
                    <img v-lazy="item.photo_url">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            images:[],
            product:{},
        }
    },
    methods: {
        async load() {
            let pid = this.$store.state.supplier.product_id
            await this.$API.getOneSupply(pid).then(res => {
                if (res.status == 200) {
                    this.product = res.data
                    return this.$API.getProductPhotos()
                }
            }).then(res => {
                if (res.status == 200) {
                    this.images = []
                    for (let obj of res.data) {
                        if (obj.product_id == pid) this.images.push(obj)
                    }
                }
            })
        }
    },
    created() {
        this.load()
    }
}
</script>

<style lang="less" scoped>
 .content-block{
    .product-detail{
        width: 100%;
        min-height: 150px;
    }
    .product-usage{
        width: 100%;
        min-height: 150px;
    }
    .product-pic{
        width: 100%;
        height: 350px;
        // background-color: #67C23C;
        margin-top: 40px;
        .images{
            width: 120%;
            position: relative;
            left: -100px;
            .image{
                width: 540px;
                background-color: black;
                display: inline-block;
                text-align: center;
                img{
                    height: 100%;
                }
            }
        }
    }
}
</style>